<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>河北射击射箭运动管理中心成绩分析系统</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="left-panel">
            <div id="header">
                <img src="./标志.jpg" alt="" width="100" >
                <h3 style="color: rgba(13, 216, 230, 0.735);">河北射击射箭运动管理中心</h3>
                <h3 style="color: rgba(13, 216, 230, 0.735);">成绩分析系统</h3>
            </div>
            
            <div id="selection">
                <h3 style="color: beige;">选择人员</h3>
                <div id="project-select">
                    <label style="color: beige;"for="projects">项目:</label>
                    <select id="projects">
                        <!-- 项目选项 --> 
                    </select>
                </div>
                <div id="coach-select">
                    <label style="color: beige;"for="coaches">教练:</label>
                    <select id="coaches">
                        <!-- 教练选项 -->
                    </select>
                </div>
                <div id="name-select">
                    <label style="color: beige;"for="names">姓名:</label>
                    
                    <ul style="color: rgba(220, 220, 210, 0.76);"id="names">
                        <!-- 姓名列表 -->
                    </ul>
                </div>
            </div>
            <div id="time-selection">
                <h3 style="color: beige;">选择时间区间</h3>
                <label style="color: beige;"for="start-date">开始日期:</label>
                <input type="date" id="start-date">
                <label style="color: beige;"for="end-date">结束日期:</label>
                <input type="date" id="end-date">
            </div>
            <div id="stats-selection">
                <h3 style="color: beige;">选择统计方式</h3>
                <select id="stats-method">
                    <option value="日">日</option>
                    <option value="周">周</option>
                    
                </select>
            </div>
            <br>
            <button id="generate-button">确认生成</button>
        </div>
        <div class="right-panel">
            <div id="selected-results">
                <h3 style="color: rgb(248, 249, 250);">已选人员</h3>
                <ul id="selected-names">
                    <!-- 选择结果 -->
                </ul>
            </div>
            <div id="chart">
                <h3 style="color:rgb(193, 125, 36) ;">图表生成区域</h3>
                <br>
                <!-- 绘制图表的区域 -->
            </div>
        </div>
    </div>

    <script src="scripts5.js"></script>
</body>
</html>
